<%--
  Created by IntelliJ IDEA.
  User: cyc
  Date: 2021/9/28
  Time: 10:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script src="scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="scripts/jquery.validate.js"></script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif" /></div>
    <div class="help">
        <c:if test="${sessionScope.user==null}"><a href="login.jsp">登录</a></c:if>
        <a class="button" id="logout" href="javascript:void(0);">注销</a><a href="register.jsp">注册</a>
        <a href="CommentServlet">留言</a>
        <a href="login.jsp">后台管理</a>
    </div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="index.jsp">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="register" class="wrap">
    <div class="shadow">
        <em class="corner lb"></em>
        <em class="corner rt"></em>
        <div class="box">
            <h1>欢迎回到易买网</h1>
            <form id="loginForm" method="post"  >
                <table>
                    <tr>
                        <td class="field">用户名：</td>
                        <td>
                            <input class="text" type="text" id="userId" name="userId"  />
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="field">登录密码：</td>
                        <td>
                            <input class="text" type="password" id="password" name="password" />
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="field">验证码：</td>
                        <td >
                            <input type="text" name="codeinput">
                            <div id="code" style="color: red;display: block"></div><h4 id="recode">换一个验证码</h4>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><label class="ui-green"><input type="button" name="submit" value="立即登录" id="login_btn" /></label></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
    Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
<script>


    $(function (){

        //生成4位随机验证码
        function createCode(){
            var code=Math.floor(Math.random()*9000+1000);
            $("#code").text(code);
        }

        createCode();

        //更换验证码
        $("#recode").click(function (){
            createCode();
        });


        $("#loginForm").validate({
            rules:{
                userId:{required:true,minlength:2},
                password:{required: true,minlength: 5},
                codeinput:{checkcode:true,required: true}
            },
            messages:{
                userId:{required:"用户名必填!!!",minlength:"用户名长度不能少于2位"},
                password:{required:"密码不填,怎么登陆",minlength:"密码长度最少5位"},
                codeinput:{required:"验证码必须要填"}
            }
        });

        $.validator.addMethod("checkcode",function(value,element,params){
            var check = $("#code").text();
            return this.optional(element)||(check==value);
        },"验证码错误");


        $("#login_btn").click(function (){


            if ($("#loginForm").valid()){
                var username=$("#userId").val();
                var password=$("#password").val();

                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/user/login",
                    dataType:"json",
                    data:{"loginname":username,"password":password},
                    success:function (res){
                        if (res.code==1){
                            if (res.username=="系统管理员"){
                                alert(res.msg);
                                location.href="${pageContext.request.contextPath}/manage/home.jsp";
                            }else {
                                alert(res.msg);
                                location.href="${pageContext.request.contextPath}/index.jsp";
                            }

                        }else {
                            alert(res.msg);
                        }
                    }
                });
            }


        });




    });



</script>
</body>
</html>
